<template>
	<view class="">
		<u-navbar title="搜索" :background="bc"  :border-bottom="false">
		</u-navbar>
		<view class="m30">
			<u-search placeholder="请输入关键词检索" :input-style="inputStyle" @search="toSearch" @custom='toSearch' v-model="keyword" :action-style="actionStyle"></u-search>
			<view class="fs28 c3 fw5 mt30">热门搜索</view>
			<view class="tag-content mt20">
				<view class="tag-item mr10" @click="handleKeySearch(item.keyword)" v-for="item in bHeatKeywords">{{item.keyword}}</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {bHeatKeywordsList} from '@/api/common.js'
	export default{
		data(){
			return{
				keyword:'',
				actionStyle:{color:'#48A147',fontSize:'28rpx'},
				inputStyle:{width:'500rpx',fontSize:'28rpx'},
				bHeatKeywords:[]
			}
		},
		onLoad() {
			this.getKey()
		},
		methods:{
			getKey(){
				bHeatKeywordsList().then(res =>{
					if(res.code==200){
						this.bHeatKeywords = res.data
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							mask:true
						})
					}
				})
			},
			handleKeySearch(e){
				uni.redirectTo({
					url:'/pages/search/result?keyWord='+e
				})
			},
			toSearch(){
				if(this.keyword){
					uni.redirectTo({
						url:'/pages/search/result?keyWord='+this.keyword
					})
				}else{
					this.$u.toast('请输入检索关键字')
				}
				
			}
		}
	}
</script>
<style>
	page{
		background-color: white;
	}
</style>
<style lang="scss" scoped>
	.tag-content{
		.tag-item{
			padding:8px 24rpx ;
			background: #F3F3F3;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFangSC-Regular;
			font-weight: normal;
			color: #666666;
			margin-bottom: 20rpx;
			display: inline-block;
		}
	}
	.search {
		width: 614rpx;
		height: 76rpx;
		background: #F1F1F1;
		border-radius: 38rpx 38rpx 38rpx 38rpx;
		opacity: 1;
		padding: 22rpx 30rpx;
	}
</style>